<template>
  <div class="home-icons">
    <swiper ref="mySwiper" :options="swiperOptions" v-if="iconsReady">
      <swiper-slide v-for="(page,pk) in iconPage" :key="pk">
        <div class="icon" v-for="item in page" :key="item.id">
          <div class="icon-image">
            <img class="icon-image-content" :src="item.imgUrl" />
          </div>
          <p class="icon-desc">{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<style lang='stylus' scoped>
@import '~styles/varible.styl';
@import '~styles/mixin.styl';
.home-icons >>> .swiper-container
    height:0
    padding-bottom :50%
.home-icons {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  overflow: hidden;
  .icon {
    position: relative;
    width: 25%;
    height: 0;
    float: left;
    height: 0;
    overflow: hidden;
    padding-bottom: 25%;

    .icon-image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0.44rem;
      box-sizing: border-box;
      padding: 0.1rem;

      .icon-image-content {
        display: block;
        height: 100%;
        margin: 0 auto;
      }
    }

    .icon-desc {
      display: block;
      position: absolute;
      height: 0.44rem;
      line-height: 0.44rem;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      color: $darkTextColor;
      ellipsis()
    }
  }
}
</style>
<script>
export default {
  name: 'HomeIcons',
  props: {
    iconList: Array
  },
  data() {
    return {
      swiperOptions: {}
    }
  },
  computed: {
    iconPage() {
      var pageList = []
      var pageSize = 8
      var total = this.iconList.length
      var pages = Math.ceil(total / pageSize)
      for (var i = 0; i < pages; i++) {
        pageList.push(this.iconList.slice(i * pageSize, (i + 1) * pageSize))
      }
      return pageList
    },
    iconsReady() {
      return !!this.iconList.length
    }
  }
}
</script>
